{extend name="web/public/base" /}
{block name="header"}
<link rel="stylesheet" href="__PUBLIC__/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
<style>
    .line{
        height:auto!important;
    }
</style>
{/block}
{block name="main"}
<section class="scrollable padder">
    <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
        <li><a><i class="fa fa-home"></i> 首页</a></li>
        <li class="active">会员管理</li>
        <li class="active">{$title}</li>
    </ul>
    <div class="row">
        <div class="col-sm-12">
            <section class="panel panel-default">
                <header class="panel-heading"> {$title}</header>
                <div>
                    <!-- 高级搜索 -->
                    <div class="cf" style="margin-left:10px;margin-top:5px;">
                        <form action="{:url('')}" method="post" class="form-horizontal">
                            <input type="text" name="usernumber" class="search-input" value="{:input('usernumber')}"
                                   placeholder="请输入用户编号" style="padding:5px;">
                            <button class="btn submit-btn" id="submit" type="submit">查询</button>
                            <a id="expandAllBtn" href="#" class='btn' onclick="return false;">全部展开</a>
                            <a id="resetBtn" href="#" class='btn' onclick="return false;">全部折叠</a>
                        </form>
                    </div>
                    <!-- 表格列表 -->
                    <div class="widget-box" style='min-height:400px;'>
                        <ul id="tree" class="ztree"></ul>
                    </div>
                </div>
            </section>
        </div>
    </div>
</section>
{/block}
<!-- /表格列表 -->
{block name="script"}
<script type="text/javascript" src="__PUBLIC__/ztree/zTreeJs/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/ztree/zTreeJs/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="__PUBLIC__/ztree/zTreeJs/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="__PUBLIC__/ztree/zTreeJs/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript">
    var zTree;
    //var zNodes;
    var demoMsg = {
        async: "正在进行异步加载，请等一会儿再点击...",
        expandAllOver: "全部展开完毕",
        asyncAllOver: "后台异步加载完毕",
        asyncAll: "已经异步加载完毕，不再重新加载",
        expandAll: "已经异步加载完毕，使用 expandAll 方法"
    }
    var setting = {
        async: {
            enable: true,
            url: "/HM26hSzy.php/user/getTree/rootid/{$rootid}",
            autoParam: ["uid"],
            dataFilter: filter,
            type: "get"
        },
        data: {
            key: {
                name: "usernumber",
                title: "title",
            },
        },
        view: {
            nameIsHTML: true
        },
        callback: {
            beforeAsync: beforeAsync,
            onAsyncSuccess: onAsyncSuccess,
            onAsyncError: onAsyncError
        }
    };

    //3
    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        childNodes = childNodes.data;
        for (var i = 0, l = childNodes.length; i < l; i++) {

            var uid = childNodes[i].uid;
            childNodes[i].icon = "__PUBLIC__/ztree/zTreeStyle/img/diy/pop.png";
            childNodes[i].target = "_SELF";
            childNodes[i].title = childNodes[i].usernumber;

            if (childNodes[i].status == 0) {
                childNodes[i].usernumber = childNodes[i].usernumber + "<span style='color:red'>[未激活]</span>"
                childNodes[i].url = "/HM26hSzy.php/user/activeUser/id/" + uid;
                childNodes[i].title = "点击激活";
            } else {
                childNodes[i].usernumber = childNodes[i].usernumber + "<span style='color:green'>[" + childNodes[i].realname + "]</span>" + "<span style='color:red'>[级别：" + childNodes[i].userrank + "]</span>";

            }
        }
        return childNodes;
    }

    //2
    function beforeAsync() {
        curAsyncCount++;
    }

    //4
    function onAsyncSuccess(event, treeId, treeNode, msg) {
        curAsyncCount--;
        if (curStatus == "expand") {
            expandNodes(treeNode.children);
        } else if (curStatus == "async") {
            asyncNodes(treeNode.children);
        }

        if (curAsyncCount <= 0) {
            if (curStatus != "init" && curStatus != "") {
                $("#demoMsg").text((curStatus == "expand") ? demoMsg.expandAllOver : demoMsg.asyncAllOver);
                asyncForAll = true;
            }
            curStatus = "";
        }
    }

    function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
        curAsyncCount--;

        if (curAsyncCount <= 0) {
            curStatus = "";
            if (treeNode != null) asyncForAll = true;
        }
    }

    var curStatus = "init", curAsyncCount = 0, asyncForAll = false,
        goAsync = false;

    function expandAll() {
        //alert('expandAll');
        if (!check()) {
            return;
        }
        var zTree = $.fn.zTree.getZTreeObj("tree");
        if (asyncForAll) {
            $("#demoMsg").text(demoMsg.expandAll);
            zTree.expandAll(true);
        } else {
            expandNodes(zTree.getNodes());
            if (!goAsync) {
                $("#demoMsg").text(demoMsg.expandAll);
                curStatus = "";
            }
        }
    }

    function expandNodes(nodes) {
        // alert('expandNodes');
        if (!nodes) return;
        curStatus = "expand";
        var zTree = $.fn.zTree.getZTreeObj("tree");
        for (var i = 0, l = nodes.length; i < l; i++) {
            zTree.expandNode(nodes[i], true, false, false);
            if (nodes[i].isParent && nodes[i].zAsync) {
                expandNodes(nodes[i].children);
            } else {
                goAsync = true;
            }
        }
    }

    function asyncAll() {
        // alert('asyncAll');
        if (!check()) {
            return;
        }
        var zTree = $.fn.zTree.getZTreeObj("tree");
        if (asyncForAll) {
            $("#demoMsg").text(demoMsg.asyncAll);
        } else {
            asyncNodes(zTree.getNodes());
            if (!goAsync) {
                $("#demoMsg").text(demoMsg.asyncAll);
                curStatus = "";
            }
        }
    }

    function asyncNodes(nodes) {
        // alert('asyncNodes');
        if (!nodes) return;
        curStatus = "async";
        var zTree = $.fn.zTree.getZTreeObj("tree");
        for (var i = 0, l = nodes.length; i < l; i++) {
            if (nodes[i].isParent && nodes[i].zAsync) {
                asyncNodes(nodes[i].children);
            } else {
                goAsync = true;
                zTree.reAsyncChildNodes(nodes[i], "refresh", true);
            }
        }
    }

    function reset() {
        //alert('reset');
        if (!check()) {
            return;
        }
        asyncForAll = false;
        goAsync = false;
        $("#demoMsg").text("");
        $.fn.zTree.init($("#tree"), setting);
    }

    function check() {
        //alert('check');
        if (curAsyncCount > 0) {
            $("#demoMsg").text(demoMsg.async);
            return false;
        }
        return true;
    }

    $(document).ready(function () {
        $.fn.zTree.init($("#tree"), setting);
        $("#expandAllBtn").bind("click", expandAll);
        $("#resetBtn").bind("click", reset);
    });
</script>
{/block}